<template>
  <div class="anticon" :class="getAppLogoClass" @click="goHome">
    <!-- <img src="/images/logo.png" /> -->
    <!-- <img src="/images/logo-ceic.jpg" /> -->
    <img :src="getAppLogoImage" />
    <!-- 标题为登录页面和首页中共用，设置字体太大后在首页中显示不下 -->
    <div
      class="ml-2 truncate md:opacity-100"
      :class="getTitleClass"
      v-show="showTitle"
      style="font-size: 0.8rem"
    >
      <!-- {{ getAppName }} -->
      <!-- {{ getAppFullTitle }} -->
      {{ getAppTitle }}
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { computed, unref } from 'vue';
  import { useGlobSetting } from '/@/hooks/setting';
  import { useGo } from '/@/hooks/web/usePage';
  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { PageEnum } from '/@/enums/pageEnum';
  import { useUserStore } from '/@/store/modules/user';
  //默认的logo图片
  import defaultLogoImage from '/images/logo.png';
  import ceicLogoImage from '/images/logo-ceic.png';

  const { globalProjectCode } = useGlobSetting();

  const props = defineProps({
    /**
     * The theme of the current parent component
     */
    theme: { type: String, validator: (v: string) => ['light', 'dark'].includes(v) },
    /**
     * Whether to show title
     */
    showTitle: { type: Boolean, default: true },
    /**
     * The title is also displayed when the menu is collapsed
     */
    alwaysShowTitle: { type: Boolean },
  });

  const { prefixCls } = useDesign('app-logo');
  const { getCollapsedShowTitle } = useMenuSetting();
  const userStore = useUserStore();
  const { title } = useGlobSetting();
  const go = useGo();

  const getAppLogoClass = computed(() => [
    prefixCls,
    props.theme,
    { 'collapsed-show-title': unref(getCollapsedShowTitle) },
  ]);

  const getTitleClass = computed(() => [
    `${prefixCls}__title`,
    {
      'xs:opacity-0': !props.alwaysShowTitle,
    },
  ]);

  /**
   * 获取logo图片，先从store中存储的当前项目logo图片获取，如果没有使用默认
   */
  const getAppLogoImage = computed(() => {
    const currentProject = userStore.getUserCurrentProject;
    if (currentProject != undefined && currentProject != null) {
      //取store中当前项目信息的values，按对象方式取值
      if (currentProject.values != undefined && currentProject.values != null) {
        let logoValue = currentProject.values.logo;
        // logoValue = currentProject.values["logo"];
        if (logoValue != undefined && logoValue != null && logoValue != '') return logoValue;
      }
    }
    // 当加载开远和阳宗海项目时使用的logo
    if (globalProjectCode == 'ky' || globalProjectCode == 'yzh') {
      return ceicLogoImage;
    }
    return defaultLogoImage;
  });

  /**
   * 获取APP项目名称文字
   */
  const getAppName = computed(() => {
    let fullTitle = title;
    const currentProject = userStore.getUserCurrentProject;
    if (currentProject != undefined && currentProject != null) {
      //取store中当前项目信息的values，按对象方式取值
      let fullTitleValue = currentProject.objname;
      // fullTitleValue = currentProject.values["fulltitle"];
      if (fullTitleValue != undefined && fullTitleValue != null && fullTitleValue != '')
        fullTitle = fullTitleValue;
    }
    return fullTitle;
  });

  /**
   * 获取APP完整标题文字
   */
  const getAppFullTitle = computed(() => {
    let fullTitle = title;
    const currentProject = userStore.getUserCurrentProject;
    if (currentProject != undefined && currentProject != null) {
      //取store中当前项目信息的values，按对象方式取值
      if (currentProject.values != undefined && currentProject.values != null) {
        let fullTitleValue = currentProject.values.fulltitle;
        // fullTitleValue = currentProject.values["fulltitle"];
        if (fullTitleValue != undefined && fullTitleValue != null && fullTitleValue != '')
          fullTitle = fullTitleValue;
      }
    }
    return fullTitle;
  });

  /**
   * 获取APP标题文字
   */
  const getAppTitle = computed(() => {
    let appTitle = title;
    const currentProject = userStore.getUserCurrentProject;
    if (currentProject != undefined && currentProject != null) {
      //取store中当前项目信息的values，按对象方式取值
      if (currentProject.values != undefined && currentProject.values != null) {
        let titleValue = currentProject.values.title;
        // titleValue = currentProject.values["title"];
        if (titleValue != undefined && titleValue != null && titleValue != '')
          appTitle = titleValue;
      }
    }
    return appTitle;
  });

  function goHome() {
    go(userStore.getUserInfo.homePath || PageEnum.HOME);
  }
</script>
<style lang="less" scoped>
  @prefix-cls: ~'@{namespace}-app-logo';

  .@{prefix-cls} {
    display: flex;
    align-items: center;
    padding-left: 7px;
    cursor: pointer;
    transition: all 0.2s ease;

    &.light {
      border-bottom: 1px solid @border-color-base;
    }

    &.collapsed-show-title {
      padding-left: 20px;
    }

    &.light &__title {
      color: @primary-color;
    }

    &.dark &__title {
      color: @white;
    }

    &__title {
      font-size: 16px;
      font-weight: 700;
      transition: all 0.5s;
      line-height: normal;
    }
  }
</style>
